import { useEffect, useState } from 'react'

import style from '../../styles/header.module.scss'
import Link from 'next/link'
import '../../utils/canvas'
export default function AppHeader() {
    let sltop = 0;
    const [headershow, setHeadershow] = useState(true)
    const scrollFun = e => {

        let st = document.documentElement.scrollTop;
        if (st >= sltop) {
            setHeadershow(false)
        } else {
            setHeadershow(true)
        }
        sltop = st

    }
    useEffect(() => {
        let cw = document.body.clientWidth;
        if (cw > 750) {
            document.addEventListener('scroll', scrollFun)
        }


        return () => {
            if (cw > 750) {
                document.removeEventListener('scroll', scrollFun)
            }
        }
    }, [])
    const goTopFun = () => {
        let scrollToptimer = setInterval(function () {
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            var speed = top / 4;
            if (document.body.scrollTop != 0) {
                document.body.scrollTop -= speed;
            } else {
                document.documentElement.scrollTop -= speed;
            }
            if (top == 0) {
                clearInterval(scrollToptimer);
            }
        }, 30);

    }

    return (
        <div className={style.defaultBox}>
            <header className={style.header} style={headershow == true ? { top: '0px' } : { top: '-70px' }}>
                <Link href="/"><h1 className={style.logo}>Reaper's blog</h1></Link>
                <nav>
                    <Link href="/">
                        <span>主页</span>
                    </Link>
                    <Link href="/timeline">
                        <span>时间轴</span>
                    </Link>
                </nav>
            </header>
            <div className={style.goTop} onClick={e => goTopFun()}>
                <img src="/gotop.png" alt="" />
                <div>回到顶部</div>
            </div>
        </div>

    )
}
